<template>
  <el-dialog
    :title="dataForm.id?'编辑':'新增'"
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRules"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="课程名称" prop="name">
        <el-input
          v-model="dataForm.name"
          autocomplete="off"
          placeholder="请输入课程名称"
          clearable
        ></el-input>
      </el-form-item>
      <!--            开始时间日期选择器-->
      <el-form-item class="filter-item" prop="startDate" label="开始时间">
        <el-date-picker
          v-model="dataForm.startDate"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择起始时间"
          :picker-options="pickerOptionsStart"
          @blur="startTimeChoice"
        >
        </el-date-picker>
      </el-form-item>
      <!--            结束时间日期选择器-->
      <el-form-item class="filter-item" prop="endDate" label="结束时间">
        <el-date-picker
          ref="endDate"
          v-model="dataForm.endDate"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择截止时间"
          :picker-options="pickerOptionsEnd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="老师姓名" prop="teacherName">
        <el-input
          v-model="dataForm.teacherName"
          autocomplete="off"
          placeholder="请输入课程老师姓名"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      pickerOptionsStart: {
        // 开始时间小于结束时间
        disabledDate: time => {
          const beginTime = this.dataForm.endDate
          if (beginTime) {
            return time.getTime() > new Date(beginTime).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        // 结束时间大于开始时间
        disabledDate: time => {
          const beginTime = this.dataForm.startDate
          if (beginTime) {
            return time.getTime() < new Date(beginTime).getTime()
          }
        }
      },
      // 控制当前的弹框的显示与隐藏
      dialogFormVisible: false,
      // 表单数据，定义和初始化
      dataForm: {
        id: undefined,
        name: '',
        startDate: '',
        endDate: '',
        teacherName: ''
      },
      queryForm: {
        startDate: '',
        endDate: ''
      },
      // 表单校验规则，一定要保证 下面的key和prop的值上保持一致
      dataRules: {
        name: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
        startDate: [{ required: true, message: '起始时间不能为空', trigger: 'blur' }],
        endDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
        teacherName: [{ required: true, message: '老师姓名不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init(id) {
      this.dialogFormVisible = true
      this.dataForm.id = id || undefined
      if (id) {
        this.$get(`/course/${id}`).then((data) => {
          this.dataForm.name = data.name
          this.dataForm.startDate = data.startDate
          this.dataForm.endDate = data.endDate
          this.dataForm.teacherName = data.teacherName
        })
      }
    },
    startTimeChoice() {
      this.$refs.endDate.focus()
    },
    dataFormSubmit() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (!this.dataForm.id) {
            this.$post('/course', this.dataForm).then(() => {
              this.dialogFormVisible = false
              this.$message.success('操作成功')
              this.$emit('refreshDataList')
            })
          } else {
            this.$put('/course', this.dataForm).then(() => {
              this.dialogFormVisible = false
              this.$message.success('操作成功')
              this.$emit('refreshDataList')
            })
          }
        }
      })
    }
  }
}
</script>
